<template>
<div class="my-evaluations abs full">
	<div class="rel full overflow-x-hidden">
		<div class="my-evaluations-head">今天生成<span class="reported-num" v-text="dayTimes"></span>个，还有<span class="has-evaluations-num" v-text="otherTimes"></span>次机会</div>
		<div class="rel show-amount"><span class="all-look-3day">3天内随便看</span>
			<div class="abs show-more" @click="showMoreContent()"><span class="square" :class="showMore?'show-more-selected':'show-more-noselected'"></span><span class="show-more-font">展示更多</span></div>
		</div>
		<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :auto-fill="false" ref="loadmore">
			<search-result v-for="item in myEvaluationsResult" :key="item.name" :isValid="item.isValid" :detail="item.insurance" @click.native="goDetail(item.insurance.ID)"></search-result>
		</mt-loadmore>
		<div v-if="myEvaluationsResult.length==0" class="none-info" v-text="'没有综合评价~'" v-cloak></div>
	</div>
</div>
</template>

<script>
import SearchResult from '../../components/search-result/search-result.vue'
export default {
	name: 'my-evaluations',
	components: {
		SearchResult
	},
	data() {
		return {
			allLoaded: false, //是否可以上拉属性，false可以上拉，true为禁止上拉
			dayTimes: '', //今日生成报告个数
			otherTimes: '', //今日剩余报告个数
			showMore: false, //展示更多flag
			pageStart: 1, //开始页
			myEvaluationsResult: [] //我的综合评价list
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.myEvaluations = this;
	},
	activated() {
		document.title = '我的查看';
		this.postMyEvaluations();
	},
	deactivated() {
		this.allLoaded = false;
		this.dayTimes = '';
		this.otherTimes = '';
		this.pageStart = 1;
		this.showMore = false;
		this.myEvaluationsResult = [];
	},
	methods: {
		// 点击列表项跳转到综合评价页面
		goDetail(id) {
			this.$router.push('/detail?id=' + id);
		},
		// 上拉加载更多
		loadBottom: function() {
			this.pageStart++;
			if (this.showMore) {
				this.postMyEvaluations('n', this.pageStart);
			} else {
				this.postMyEvaluations('y', this.pageStart);
			}
			this.$refs.loadmore.onBottomLoaded(); // 固定方法，查询完要调用一次，用于重新定位  
		},
		// 展示更多
		showMoreContent: function() {
			this.showMore = !this.showMore;
			this.pageStart = 1;
			if (this.showMore) {
				this.myEvaluationsResult = [];
				this.postMyEvaluations('n');
			} else {
				this.myEvaluationsResult = [];
				this.postMyEvaluations();
			}
		},
		// 我的评价list
		postMyEvaluations(effectiveType = 'y', pageStart = 1) {
			// 获取用户ID
			let customerId = this.$util.getCustomerId();
			if (!customerId) {
				return;
			}
			var that = this;
			this.$util.ajax(`/evaluation/list/my`, 'post', {
				customerId: customerId,
				effectiveType: effectiveType, //展示更多
				pageStart: pageStart,
				pageSize: 10
			}).then(function(data) {
				console.log('我的查看');
				console.log(data);
				if (data.code == "100000") {
					that.dayTimes = data.data.dayTimes;
					that.otherTimes = data.data.otherTimes;
					data.data.list.length < 10 ? that.allLoaded = true : ''; //数据量小于pageSize,不能执行上拉加载更多操作
					data.data.list.forEach(function(item) {
						if (item.insurance) {
							that.myEvaluationsResult = that.myEvaluationsResult.concat(item);
						}
					});
					console.log("ddd");
					console.log(that.myEvaluationsResult);
				}
			}).catch(function(err) {
				console.log(err);
			});
		}
	}
}
</script>

<style scoped>
.my-evaluations {
	background: url(../detail/image/star_bg.png) no-repeat;
	background-size: 100%;
}

.my-evaluations-head {
	background: url(../my-reports/image/my-reports-head-bg.png) no-repeat;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	font-size: .35rem;
	height: 1.4rem;
	line-height: 1.4rem;
	text-align: center;
	color: #FBFBFC;
}

.my-evaluations-head .reported-num,
.my-evaluations-head .has-evaluations-num {
	color: #7EFD95
}

.show-amount {
	font-size: .25rem;
	color: #B5CFFF;
	margin: .3rem 0;
	box-sizing: border-box;
	padding: 0 .35rem;
}

.show-more {
	right: .35rem;
	top: 0;
	color: #FFE373
}

.show-more-selected {
	background: url(../my-reports/image/square-full.png) no-repeat;
	background-size: 100% 100%;
}

.show-more-noselected {
	background: url(../my-reports/image/square.png) no-repeat;
	background-size: 100% auto;
}

.show-more .square {
	display: inline-block;
	vertical-align: text-bottom;
	width: .3rem;
	height: .3rem;
	margin-right: .1rem;
}

.result-item:last-child {
	margin-bottom: 1rem
}

.none-info {
	text-align: center;
	margin-top: 34%;
	font-size: .8rem;
	color: #FBFBFC;
}
</style>
